<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Example</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var path = new Path();
		path.moveTo(200, 200);
		path.curveTo([170, 50], [300, 200]);
		path.strokeWidth = 1;
		path.strokeColor = 'black';
		var curve = path.curves[0];

		function onMouseMove(event) {
			modifyCurve(event.point, true);
		}

		function modifyCurve(point, remove) {
			curve.segment2.point = point;
			var length = curve.length;
			var step = 10;
			var iteratively = false;
			var flatten = true;
			var num = Math.floor(length / step);
			var prev = 0;
			if (flatten) {
				var clone = path.clone();
				clone.flatten(step);
				for (var i = 0; i < clone.segments.length; i++) {
					var point = clone.segments[i].point;
					var circle = new Path.Circle(point, step / 2);
					circle.strokeColor = 'red';
					if (remove)
						circle.removeOnMove();
				}
				clone.remove();
			} else {
				for (var i = 0, pos = 0; i <= num; i++, pos += step) {
					var t = iteratively
							? curve.getParameter(step, prev)
							: curve.getParameter(pos);
					var point = curve.getPoint(t);
					var circle = new Path.Circle(point, step / 2);
					circle.strokeColor = 'red';
					if (remove)
						circle.removeOnMove();
					prev = t;
				}
			}
		}

		// modifyCurve(new Point(400, 377), false);

	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>